<
コンテンツ
説明 バグレポート

コンテナのプロパティをアニメーション化する

コンテンツ

のContainerクラスは便利な方法を提供します 特定のプロパティを持つウィジェットを作成するには: 幅、高さ、背景色、パディング、境界線など。

単純なアニメーションでは、これらのプロパティを時間の経過とともに変更することがよくあります。 例えば、 背景色を灰色から緑色にアニメーション化することもできます。 項目がユーザーによって選択されたことを示します。

これらのプロパティをアニメーション化するには、 Flutter が提供するのは、AnimatedContainerウィジェット。 以下のようなContainerウィジェット、AnimatedContainerを定義できます 幅、高さ、背景色など。ただし、AnimatedContainer新しいプロパティで再構築されると、自動的に 古い値と新しい値の間をアニメーション化します。 Flutter では、これらのタイプの アニメーションは「暗黙的アニメーション」として知られています。

このレシピでは、AnimatedContainerサイズをアニメーション化するには、 ユーザーがボタンをタップしたときの背景色と境界線の半径 次の手順を使用します。

  1. デフォルトのプロパティを使用して StatefulWidget を作成します。
  2. を構築するAnimatedContainerプロパティを使用して。
  3. 新しいプロパティを使用して再構築してアニメーションを開始します。

1. デフォルトのプロパティを使用して StatefulWidget を作成する

まず、作成しますStatefulWidgetとStateクラス。 カスタム State クラスを使用して、切り替えられるプロパティを定義します。 時間。この例では、幅、高さ、色、境界線が含まれます。 半径。各プロパティのデフォルト値を定義することもできます。

これらのプロパティはカスタムに属しますStateクラスなので彼らは ユーザーがボタンをタップすると更新できます。

class AnimatedContainerApp extends StatefulWidget {
  const AnimatedContainerApp({super.key});

  @override
  State<AnimatedContainerApp> createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  // Define the various properties with default values. Update these properties
  // when the user taps a FloatingActionButton.
  double _width = 50;
  double _height = 50;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    // Fill this out in the next steps.
  }
}

2. を構築します。AnimatedContainerプロパティを使用して

次に、AnimatedContainerで定義されたプロパティを使用して、 一つ前の手順。さらに、durationそれはどれくらいの期間を定義しますか アニメーションが実行されるはずです。

AnimatedContainer(
  // Use the properties stored in the State class.
  width: _width,
  height: _height,
  decoration: BoxDecoration(
    color: _color,
    borderRadius: _borderRadius,
  ),
  // Define how long the animation should take.
  duration: const Duration(seconds: 1),
  // Provide an optional curve to make the animation feel smoother.
  curve: Curves.fastOutSlowIn,
)

3. 新しいプロパティで再構築してアニメーションを開始します

最後に、リビルドしてアニメーションを開始します。AnimatedContainer新しいプロパティを使用します。 再構築をトリガーするにはどうすればよいですか? 使用setState()方法。

アプリにボタンを追加します。ユーザーがボタンをタップすると更新されます 新しい幅、高さ、背景色、境界線の半径を持つプロパティ への通話内でsetState()。

実際のアプリは通常、固定値の間で遷移します (たとえば、 背景が灰色から緑色に変わります）。このアプリの場合、 ユーザーがボタンをタップするたびに新しい値が生成されます。

FloatingActionButton(
  // When the user taps the button
  onPressed: () {
    // Use setState to rebuild the widget with new values.
    setState(() {
      // Create a random number generator.
      final random = Random();

      // Generate a random width and height.
      _width = random.nextInt(300).toDouble();
      _height = random.nextInt(300).toDouble();

      // Generate a random color.
      _color = Color.fromRGBO(
        random.nextInt(256),
        random.nextInt(256),
        random.nextInt(256),
        1,
      );

      // Generate a random border radius.
      _borderRadius =
          BorderRadius.circular(random.nextInt(100).toDouble());
    });
  },
  child: const Icon(Icons.play_arrow),
)

インタラクティブな例

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(const AnimatedContainerApp());

class AnimatedContainerApp extends StatefulWidget {
  const AnimatedContainerApp({super.key});

  @override
  State<AnimatedContainerApp> createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  // Define the various properties with default values. Update these properties
  // when the user taps a FloatingActionButton.
  double _width = 50;
  double _height = 50;
  Color _color = Colors.green;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(8);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AnimatedContainer Demo'),
        ),
        body: Center(
          child: AnimatedContainer(
            // Use the properties stored in the State class.
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            // Define how long the animation should take.
            duration: const Duration(seconds: 1),
            // Provide an optional curve to make the animation feel smoother.
            curve: Curves.fastOutSlowIn,
          ),
        ),
        floatingActionButton: FloatingActionButton(
          // When the user taps the button
          onPressed: () {
            // Use setState to rebuild the widget with new values.
            setState(() {
              // Create a random number generator.
              final random = Random();

              // Generate a random width and height.
              _width = random.nextInt(300).toDouble();
              _height = random.nextInt(300).toDouble();

              // Generate a random color.
              _color = Color.fromRGBO(
                random.nextInt(256),
                random.nextInt(256),
                random.nextInt(256),
                1,
              );

              // Generate a random border radius.
              _borderRadius =
                  BorderRadius.circular(random.nextInt(100).toDouble());
            });
          },
          child: const Icon(Icons.play_arrow),
        ),
      ),
    );
  }
}